<template>
  <div class="app-container">
    <h3>区域管理测试页面</h3>
    
    <el-button @click="loadRootData" type="primary">加载根节点数据</el-button>
    <el-button @click="testChildren" type="success">测试子节点加载</el-button>
    
    <el-table
      v-loading="loading"
      :data="regionList"
      row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      :default-expand-all="false"
      lazy
      :load="loadChildren"
      style="width: 100%; margin-top: 20px;">
      
      <el-table-column label="ID" prop="id" width="80" />
      <el-table-column label="名称" prop="name" min-width="200" />
      <el-table-column label="简称" prop="shortName" min-width="120" />
      <el-table-column label="区域代码" prop="regionCode" min-width="120" />
      <el-table-column label="区域类型" prop="regionType" min-width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.regionType === 'province'" type="primary">省</el-tag>
          <el-tag v-else-if="scope.row.regionType === 'city'" type="success">市</el-tag>
          <el-tag v-else-if="scope.row.regionType === 'district'" type="warning">区县</el-tag>
          <el-tag v-else-if="scope.row.regionType === 'township'" type="info">乡镇</el-tag>
          <span v-else>{{ scope.row.regionType }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status" min-width="80">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === '0'" type="success">正常</el-tag>
          <el-tag v-else type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="testLoadChildren(scope.row)">测试加载子节点</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div style="margin-top: 20px;">
      <h4>调试信息：</h4>
      <pre>{{ debugInfo }}</pre>
    </div>
  </div>
</template>

<script>
import { getRootRegions, getChildrenRegions } from "@/api/monitor/njt/region/index";

export default {
  name: "RegionTest",
  data() {
    return {
      loading: false,
      regionList: [],
      debugInfo: {}
    };
  },
  methods: {
    /** 加载根节点数据 */
    loadRootData() {
      this.loading = true;
      getRootRegions().then(response => {
        this.regionList = response.data;
        this.debugInfo = {
          message: "根节点数据加载成功",
          count: this.regionList.length,
          data: this.regionList
        };
        this.loading = false;
        this.$message.success("根节点数据加载成功");
      }).catch(error => {
        this.loading = false;
        this.debugInfo = {
          message: "根节点数据加载失败",
          error: error.message
        };
        this.$message.error("根节点数据加载失败");
      });
    },
    
    /** 懒加载子节点 */
    loadChildren(tree, treeNode, resolve) {
      console.log("懒加载子节点:", tree, treeNode);
      getChildrenRegions(tree.id).then(response => {
        console.log("子节点数据:", response.data);
        resolve(response.data);
      }).catch(error => {
        console.error("子节点加载失败:", error);
        resolve([]);
      });
    },
    
    /** 测试子节点加载 */
    testChildren() {
      if (this.regionList.length > 0) {
        const firstRegion = this.regionList[0];
        this.testLoadChildren(firstRegion);
      } else {
        this.$message.warning("请先加载根节点数据");
      }
    },
    
    /** 测试加载指定节点的子节点 */
    testLoadChildren(row) {
      this.loading = true;
      getChildrenRegions(row.id).then(response => {
        this.debugInfo = {
          message: `节点 ${row.name} 的子节点加载成功`,
          parentId: row.id,
          childrenCount: response.data.length,
          children: response.data
        };
        this.loading = false;
        this.$message.success(`节点 ${row.name} 的子节点加载成功`);
      }).catch(error => {
        this.loading = false;
        this.debugInfo = {
          message: `节点 ${row.name} 的子节点加载失败`,
          error: error.message
        };
        this.$message.error(`节点 ${row.name} 的子节点加载失败`);
      });
    }
  },
  created() {
    this.loadRootData();
  }
};
</script>

<style scoped>
pre {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  max-height: 300px;
  overflow-y: auto;
}
</style>
